{% extends 'base.html' %}
{% load staticfiles %}

{% block content %}
    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="container theme-showcase" role="main">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-top: 50px;">
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
                <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                {% for banner in banners %}
                    <div class="item {% if forloop.first %}active{% endif %}">
                        <img src="{{ MEDIA_URL }}{{ banner.image }}" data-holder-rendered="true">
                    </div>
                {% endfor %}
            </div>
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

        <!-- Example row of columns -->

    </div>

    <div class="container">
        <!-- Example row of columns -->
        <div class="page-header">
            <h3>精品推荐</h3>
        </div>
        <div class="row">
            {% for menu in hot_menu %}
                 <div class="col-sm-6 col-md-3">
                <div class="thumbnail">
                    <a href="{% url 'cookbook:cookbook_detail' menu.id %}"><img src="{{ MEDIA_URL }}{{ menu.image }}" alt="..."></a>
                    <div class="caption">
                        <h3 class="text-center">{{ menu.name }}</h3>
                        <h5 class="text-center"><a title="{{ menu.user }}" href="{% url 'cookbook:user_menu' menu.user_id %}" class="u">{{ menu.user }}</a></h5>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div> <!-- /container -->
    <div class="container">
        <!-- Example row of columns -->
        <div class="page-header">
            <h3>热门话题</h3>
        </div>
        <div class="row">
            {% for topic in hot_topic %}
            <div class="media col-md-6" style="height: 120px; margin-top: 10px;">
                <div class="media-left">
                    <a href="{% url 'cookbook:user_menu' topic.user_id %}">
                        <img class="img-circle" data-src="holder.js/64x64" alt="64x64"
                             src="{{ MEDIA_URL }}{{ topic.user.image }}"
                             data-holder-rendered="true" style="width: 64px; height: 64px;">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading"><a href="{% url 'community:community_detail' topic.id %}">{{ topic.title }}</a></h4>
                    <div class="clearfix" style="margin-bottom: 6px;">
                        <div class="pull-left">
                            <span><span class="glyphicon glyphicon-time"
                                        aria-hidden="true"></span>&nbsp;{{ topic.add_time }}</span>
                        </div>

                    </div>


                    <p>{{ topic.desc | safe }}</p>
                </div>
            </div>
            {% endfor %}
        </div>

        <hr>
    </div> <!-- /container -->
    <script>
    $(function () {
        $('p>img').css({
            'width': 64,
            'height': 64,
        })
    });
    </script>
{% endblock %}
